Typo 组件

介绍

字体组件用于展示文本内容。分别有 FQText、FQTitle、FQNumeral 组件。

Title 组件

介绍

标题组件用于展示页面标题。

用法

基本引入

import { FQTitle } from '@fq/fq-weapp-ui';

组件依赖的样式文件（仅按需引用时需要）

import '@fq/fq-weapp-ui/dist/styles/components/title.scss';

基础用法

<FQTitle level={1} bold className='col'>加粗</FQTitle>

Text 组件

介绍

文本组件用于展示文本内容。

用法

基本引入

import { FQText } from '@fq/fq-weapp-ui';

组件依赖的样式文件（仅按需引用时需要）

import '@fq/fq-weapp-ui/dist/styles/components/text.scss';

基础用法

<FQText className='col' size={20} bold>加粗</FQText>

Numberal 组件

介绍

数字组件用于展示数字内容。

用法

基本引入

import { FQNumeral } from '@fq/fq-weapp-ui';

组件依赖的样式文件（仅按需引用时需要）

import '@fq/fq-weapp-ui/dist/styles/components/numberal.scss';

基础用法

<FQNumeral className='col' size={24} bold value={item.name} />

API

Title 属性

参数	说明	类型	可选值	默认值
level	标题级别	number	1 / 2 / 3 / 4 / 5 / 6 / 7	1
bold	是否加粗	boolean	-	false
ellipsis	是否显示省略号	boolean / number	true: 1行溢出省略 / false: 不溢出省略 / number: 溢出省略行数	false
className	标题样式类名	string	-	-
style	标题样式	React.CSSProperties	-	-

Text 属性

参数	说明	类型	可选值	默认值
size	字体大小	number	20 / 22 / 24 / 26 / 28	24
bold	是否加粗	boolean	-	false
userSelect	用户是否可以选中文本	boolean	-	false
space	显示连续空格	Taro.TextProps.TSpace	ensp(中文字符空格一半大小) / emsp(中文字符空格大小) / nbsp(根据字体设置的空格大小)	-
decode	是否解码	boolean	-	false
className	文本样式类名	string	-	-
style	文本样式	React.CSSProperties	-	-

Numberal 属性

参数	说明	类型	可选值	默认值
value	数字内容	string / number	-	-
type	数字类型	string	delete / normal	normal
size	字体大小	number	24 / 28 / 32 / 36 / 40 / 44 / 48 / 56 / 64 / 80	24
bold	是否加粗	boolean	-	false
prefix	前缀插槽	ReactNode	-	-
suffix	后缀插槽	ReactNode	-	-
thousands	是否显示千分位	boolean	-	false
showDecimal	是否显示小数点	boolean	-	false
decimal	小数点位数	number	-	2
className	文本样式类名	string	-	-
style	文本样式	React.CSSProperties	-	-